<@override name="content">
<div class="header">
  <h1 class="page-title">数据管理</h1>
</div>
<ul class="breadcrumb">
  <li>
    <a href="admin">首页</a>
    <span class="divider">/</span>
  </li>
  <li>
    <a href="admin/problem">题目管理</a>
    <span class="divider">/</span>
  </li>
  <li>
    <a href="admin/problem/show/${pid!}">${pid!}</a>
    <span class="divider">/</span>
  </li>
  <li class="active">数据管理</li>
</ul>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="well">
      <div id="container">
        <h3><a href="problem/show/${problem.pid}" target="_blank">${problem.pid}</a>: <a
                href="admin/problem/show/${problem.pid}">${problem.title}</a></h3>
        <p class="text-info">Select files to upload.</p>
        <div id="filelist">
          <!-- <form class="form-horizontal" action="admin/problem/uploadData" method="post" enctype="multipart/form-data">
            <div class="control-group problem">
              <label class="control-label" for="inputFile">File</label>
              <div class="controls">
                <input type="file" id="inputFile" name="dataFile" required />
              </div>
            </div>
            <div class="control-group">
              <div class="controls">
                <button type="submit" class="btn btn-primary">Upload</button>
              </div>
            </div>
          </form> -->
        </div>

        <div id="data-container">
          <a id="pickfiles" href="javascript:;"><i class="fa fa-file-text-o btn btn-primary"
                                                   aria-hidden="true">Browse</i></a>
          <a id="uploadfiles" href="javascript:;"><i class="fa fa-file-text-o btn btn-primary disabled"
                                                     aria-hidden="true" id="upload">Upload</i></a>
        </div>
        <div id="console"></div>
        <br>

        <h4>Problem Test Data:</h4>
        <div>
          <#if dataFiles??>
            <table id="data-files" class="table table-hover table-condensed table-bordered">
              <thead>
              <tr>
                <th>No.</th>
                <th>File</th>
                <th>Type</th>
                <th>Permissions</th>
                <th>User</th>
                <th>Group</th>
                <th>Size</th>
                <th>Modified</th>
                <th>Action</th>
              </tr>
              </thead>
              <tbody>
                <#list dataFiles as file>
                <tr>
                  <td>${file_index+1}</td>
                  <td class="file"><a href="admin/problem/viewData/${pid}?name=${file.name}"
                                      target="_blank">${file.name}</a></td>
                  <td class="type">${file.type}</td>
                  <td class="permissions">${file.perm}</td>
                  <td class="user">${file.user}</td>
                  <td class="group">${file.group}</td>
                  <td class="size" size="${file.size}"></td>
                  <td class="timestamp" data="${file.modifyTime}"></td>
                  <td class="action" name="${file.name}">
                    <i class="btn btn-primary edit">Edit</i>
                    <i class="btn btn-info download">Download</i>
                    <i class="btn btn-danger delete" data-trigger="confirm">Delete</i>
                  </td>
                </tr>
                </#list>
              </tbody>
            </table>
          </#if>
        </div>
        <p class="text-info">.in files are standard input data files.</p>
        <p class="text-info">.out files are standard output data files.</p>
        <p class="text-warning">.in file name and .out file name should corresponding.(If there is no 1.out, 1.in will
          ignored for Judge.)</p>
        <p class="text-info">spj binary is for Special Judged problem.</p>
        <p class="text-info">we should always upload source code of spj.</p>
      </div>
    </div>
  </div>
</div>

<div class="modal hide fade dataModal" id="editModal" tabindex="-1"></div>
</@override>

<@override name="styles">
<link rel="stylesheet" href="assets/bootstrap-modal/bootstrap-modal.css" type="text/css">
<link rel="stylesheet" href="assets/tablecloth/css/tablecloth.css" type="text/css">
<link rel="stylesheet" type="text/css" href="assets/tipsy/css/tipsy.css" type="text/css">
<link rel="stylesheet" href="assets/jquery.artDialog/skins/twitter.css" type="text/css">
</@override>

<@override name="scripts">
<script src="assets/tablecloth/js/jquery.metadata.js"></script>
<script src="assets/tablecloth/js/jquery.tablesorter.min.js"></script>
<script src="assets/tablecloth/js/jquery.tablecloth.js"></script>
<script src="assets/bootstrap-modal/bootstrap-modal.js"></script>
<script src="assets/bootstrap-modal/bootstrap-modalmanager.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    var url = 'admin/problem/editData/' + ${pid!};
    $modal = $('#editModal');
    $('.edit').click(function () {
      $('#filename').html($(this).parent().attr('name'));
      $('body').modalmanager('loading');
      $modal.load(url, {'name': $(this).parent().attr('name')}, function () {
        $modal.modal();
      });
    });

    $('.download').click(function () {
      window.location.href = 'admin/problem/downloadData/' + ${pid!} +'?name=' + $(this).parent().attr('name');
    });

    $('.delete').click(function () {
      var name = $(this).parent().attr('name');
      var $that = $(this).parent().parent();
      art.dialog({
        title: 'Confirm',
        content: 'Are you sure to remove this file(' + name + ')?',
        lock: true,
        opacity: 0.87,
        okVal: 'Yes',
        ok: function () {
          $.post('admin/problem/deleteData', {pid: ${pid!}, name: name}, function (data) {
            if (data.error) {
              $.dialog().content(data.error).lock().time(1.5);
            } else {
              $.dialog().content('Ok, file moved to upload directory.').lock().time(1.5);
              $that.remove();
            }
          });
          return true;
        },
        cancelVal: 'No',
        cancel: true
      });
    });

    $("#data-files").tablecloth({
      theme: "stats",
      condensed: true,
      sortable: false,
      striped: true,
      clean: true
    });

    $('.size').each(function () {
      $(this).html(num2size($(this).attr('size')));
    });
  });
</script>

<script src="assets/tipsy/js/jquery.tipsy.min.js"></script>
<script src="assets/jquery.artDialog/jquery.artDialog.js"></script>
<script type="text/javascript" src="assets/plupload/js/plupload.full.min.js"></script>
<script type="text/javascript">
  // Custom example logic
  var uploader = new plupload.Uploader({
    runtimes: 'html5,flash,silverlight,html4',
    browse_button: 'pickfiles', // you can pass in id...
    container: document.getElementById('data-container'), // cannot change to $('#container')
    url: baseUrl + 'admin/problem/uploadData',
    flash_swf_url: baseUrl + 'assets/plupload/js/Moxie.swf',
    silverlight_xap_url: baseUrl + 'assets/plupload/js/Moxie.xap',
    multipart_params: {pid: ${pid!}},

    filters: {
      //max_file_size : '10mb',
      mime_types: [
        {title: "Data files", extensions: "in,out,txt"},
        {title: "Source files", extensions: "c,cc,cpp,pas,java,py"},
        {title: "Zip files", extensions: "zip,rar"}
      ]
    },

    init: {
      PostInit: function () {
        $('#filelist').html('');

        $('#uploadfiles').click(function () {
          uploader.start();
          return false;
        });
      },

      FilesAdded: function (up, files) {
        $('#upload').removeClass('disabled');
        plupload.each(files, function (file) {
          var html = $('#filelist').html();
          html += '<div class="file">' + file.name + ' (' + plupload.formatSize(file.size) + ')' +
                  '<div style="width:50%;" class="progress progress-striped active">' +
                  '<div class="bar" id="' + file.id + '"></div></div></div>';
          $('#filelist').html(html);
        });
      },

      UploadProgress: function (up, file) {
        $('#' + file.id).css('width', file.percent + '%');
        if (file.percent >= 100) {
          $('#' + file.id).parent().removeClass('active').addClass('progress-success');
        }
      },

      UploadComplete: function () {
        var html = $('#filelist').html();
        if (html == '') {
          return false;
        }
        $.dialog().content('All files uploaded.').lock().time(1);
        setTimeout(function () {
                  window.location.reload();
                },
                1500);
      },

      Error: function (up, err) {
        var html = $('#console').html();
        html += '<p class="text-error">Error #' + err.code + ': ' + err.message + '</p>';
        $('#console').html(html);
      }
    }
  });

  uploader.init();
</script>
</@override>
<@extends name="../_layout.html"></@extends>
